<template>
    <div class="box">
        <div class="nav">
            <span>题目ID:</span>
            <el-input style="width:250px;" placeholder="请输入内容" v-model="input" clearable>
            </el-input>

            <span>年级:</span>
            <el-select v-model="value" placeholder="年级">
                <el-option v-for="item in options1" @click.native="aaa(item)" :key="item.value" :label="item.value"
                    :value="item.label">
                </el-option>
            </el-select>

            <span>学科:</span>
            <el-select v-model="value2" placeholder="请选择">
                <el-option v-for="item in options2" :key="item.value2" :label="item.label" :value="item.value2">
                </el-option>
            </el-select>

            <el-button type="primary" @click="chaxun" style="margin-left:10px;">查询</el-button>
            <el-button type="primary" @click="add">添加</el-button>

        </div>
        <!-- 这个列表的所有数据 -->
        <div class="list_Page">
            <el-table :data="arr" border style="width: 100%">
                <!--  -->
                <el-table-column fixed prop="id" label="Id" width="90">
                </el-table-column>
                <el-table-column label="学科" width="120">
                    <template slot-scope="scope">
                        <div v-for="item, index in arr2" :key="index">
                            <!-- 这是获取的学科数据 -->
                            <p v-if="item.id == scope.row.subjectId ? true : false">{{ item.name }} ({{ item.levelName }})
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="700">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="170">
                </el-table-column>
                <el-table-column style="" fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" size="small">编辑</el-button>
                        <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
                    </template>>
                </el-table-column>
            </el-table>
        </div>


        <!-----------------------------页脚-------------------------- -->
        <div class="block" style=" margin-top:25px;margin-left:5px;">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage1" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size=Pagesize
                layout="total, sizes, prev, pager, next, jumper" :total=total>
            </el-pagination>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {

            Pagesize:8,//当前条数
            total:1,//默认显示第页
            input: '',//输入框的值
            list: [],
            arr: [],//他这是试卷列表数据
            arr2: [],//学科列表数据
            arr3: [],//查询列表数据
            options1: [{
                value: '一年级',
                label: '1'
            }, {
                value: '二年级',
                label: '2'
            }, {
                value: '三年级',
                label: '3'
            }, {
                value: '四年级',
                label: '4'
            }, {
                value: '五年级',
                label: '5'
            }, {
                value: '六年级',
                label: '6'
            }, {
                value: '初一',
                label: '7'
            }, {
                value: '初二',
                label: '8'
            }, {
                value: '初三',
                label: '9'
            }, {
                value: '高一',
                label: '10'
            }, {
                value: '高二',
                label: '11'
            }, {
                value: '高三',
                label: '12'
            }],
            options2: [],//学科
            value: '',//年级
            value2: '',
            currentPage1: 1,
        }
    },
    mounted() {
        // -------------------  获取试卷分页------------------------------------------
        this.database()
        // -------------------  点击编辑获取的数据渲染到页面上-------------------------

    },
    methods: {
        database(){
            let obj = {
            "id": null,
            "level": null,
            "pageIndex": 1,
            "pageSize":this.Pagesize,
            "total":this.total,
            "createTime": null,//时间

        }
        this.axios({
            url: "/api/admin/exam/paper/page",
            method: "post",
            data: obj
        }).then(res => { 
            this.total = res.data.response.list.length
            this.arr = res.data.response.list
        })

        // --------------------------------------------------------------

        //--------------------学科接口------------------------------------
        this.axios({
            url: "/api/admin/education/subject/list",
            method: "post"
        }).then(res => {
            this.arr2 = res.data.response;
        })

        // --------------------------------------------------------------


        },
        //点击年级获取下拉菜单的数据
        aaa(item) {
            this.value = item.label
        },
        //点击添加，添加商品数据
        add() {
            this.$router.push("/exam/add/list")
        },
        remove(sha){//点击删除
            this.axios({
                url:"/api/admin/exam/paper/delete/"+sha.id,
                method:"post"
            }).then(res=>{
                this.arr.splice(sha,1)//点击删除时  实时刷新页面数据
            })
        },
        //点击查询
        chaxun() {
            let obj = {
                "id":this.input,
                "level":this.value,
                "pageIndex": 1,
                "pageSize": 10,
                "total":1,
                "createTime": null,//时间

            }
            this.axios({
                url: "/api/admin/exam/paper/page",
                method: "post",
                data: obj
            }).then(res => {
                this.total = res.data.response.list.length
                this.arr = res.data.response.list
            })
    
                //在input中输入文字点击查询获取 数据
            this.arr = this.arr.filter((item) => {
                if (item.id == this.input) {
                    return item
                }

            })

        },
        handleClick(row) {
            console.log(row);
            this.$store.commit("stated",row)
        },
        //获取当前的对应的条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.Pagesize = val
            // console.log(this.Pagesize);
            this.database()
        },
        //获取点击当前页面
        handleCurrentChange(val) {
            this.total=val
            // console.log(this.total);
            this.database()
            // console.log(`当前页: ${val}`);
            
          
        }
    },

}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: calc(100vh - 105px);
    overflow-y: auto;
    .nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;

        span {
            color: #606266;
            margin-left: 10px;
            margin-right: 20px;
            font-size: 14px;
            font-weight: 700;
        }
    }

    .list_Page {
        width: 98.7%;
        margin-left: 7px;
    }

}
</style>